<template>
  <table class="mailTable" :style="styleObject">
    <tr>
      <td class="rowStyle">阶段</td>
      <td v-for="(item, index) in dataCount" :key="index" class="DataStyle">
        <div class="index_close">
          <div class="h_title">
            {{ index + 1 }}
          </div>
          <span
            v-if="isEdit && index != 0"
            @click="handDel(item, index)"
            class="el-icon-circle-close"
            style="font-size: 13px"
          >
          </span>
        </div>
      </td>
    </tr>
    <tr v-for="index in rowCount" :key="index">
      <td class="rowStyle row_key">
        {{ tableRows[index - 1].key }}
        <span v-if="tableRows[index - 1].unit">
          ({{ tableRows[index - 1].unit }})
        </span>
      </td>
      <td v-for="item in dataCount" :key="item" class="DataStyle">
        <el-input
          style="width: 60%; margin: 10px 0"
          @blur="
            inputBlur(
              tableRows[index - 1].type,
              tableData[item - 1],
              index,
              tableData[item - 1][tableRows[index - 1].value]
            )
          "
          ref="input"
          v-model="tableData[item - 1][tableRows[index - 1].value]"
          :placeholder="placeholderVal(tableRows[index - 1].type)"
          size="mini"
          clearable
          v-if="!tableRows[index - 1].additional.length"
        ></el-input>
        <!-- tableRows[index - 1].type == 3 ? '请输入 例:10-20' : '请输入' -->
        <!-- @blur="active = null" -->
        <el-select
          @blur="selectBlur"
          v-else
          @change="(val) => seleAdditional(val, tableData[item - 1])"
          v-model="tableData[item - 1][tableRows[index - 1].value]"
          placeholder="请选择"
          clearable
          size="small"
          ref="input"
        >
          <el-option
            v-for="optionItem in tableRows[index - 1].additional"
            :key="optionItem.value"
            :label="optionItem.text"
            :value="optionItem.value"
          >
          </el-option>
        </el-select>
        <!-- 
        <h3 @click="dbShowInput(i, index)" v-else>
          <span
            class="default_value"
            v-if="i == 0 && !tableData[item - 1][tableRows[index - 1].value]"
          >
            {{ tableRows[index - 1].key }}
          </span>
          <span v-else>
            {{
              tableRows[index - 1].type == 1
                ? setVal(
                    tableData[item - 1][tableRows[index - 1].value],
                    tableRows[index - 1].additional
                  )
                : tableData[item - 1][tableRows[index - 1].value]
            }}
          </span>
          <span
            v-if="
              tableData[item - 1][tableRows[index - 1].value] &&
              tableRows[index - 1].errorRange
            "
          >
            ± {{ tableRows[index - 1].errorRange }}
          </span>
        </h3> -->
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      styleObject: {},
      s_showByRow: true,
    };
  },
  props: {
    tableData: {
      type: Array,
      delete: () => [],
    },
    tableStyle: {},
    tableRows: {
      type: Array,
      delete: () => [],
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      active: null,
    };
  },
  computed: {
    placeholderVal() {
      return function (type) {
        return "请输入";
        // switch (type) {
        //   case "3":
        //     return "请输入 例:T-20";
        //   default:
        //     return "请输入";
        // }
      };
    },
    setVal() {
      return function (val, arr) {
        console.log("arr,val :>> ", arr, val);
        return val ? arr.find((item) => item.value == val)?.text || "" : "";
      };
    },
    rowCount: function () {
      return this.tableRows.length;
    },
    dataCount: function () {
      return this.tableData.length;
    },
  },

  created() {
    this.styleObject = this.tableStyle;
  },
  methods: {
    inputBlur(type, val, index, v) {
      // 区间输入值的校验
      this.selectBlur();
      // if (type == 3 && v) {
      //   const strSymbol = "-";
      //   var reg = /^-?[0-9]\d*$/;

      //   const isStr =
      //     v.includes(strSymbol) &&
      //     v.split(strSymbol).length == 2 &&
      //     reg.test(v.split(strSymbol)[0]) &&
      //     reg.test(v.split(strSymbol)[1]);
      //   if (!isStr) {
      //     this.$set(val, this.tableRows[index - 1].value, "");
      //     this.$msg("输入不合法,请重新输入,例:10" + strSymbol + "20");
      //     this.$refs["input"][0].focus();
      //     return;
      //   }
      //   this.selectBlur();
      // } else {
      //   this.selectBlur();
      // }
    },
    selectBlur() {
      setTimeout(() => {
        this.active = null;
      }, 100);
    },
    seleAdditional(val, item) {
      this.active = null;
      // console.log("val,item :>> ", val, item);
      // item.text = item.additional.find((item) => item.value == val).text;
    },
    handDel(item, index) {
      console.log(item, index, this.tableData[1]);
      this.tableData.splice(index, 1);
    },
    dbShowInput(i, index) {
      if (!this.isEdit) return;
      setTimeout(() => {
        this.active = index + "" + i;
        this.$nextTick(() => {
          this.$refs["input"][0].focus();
        });
      }, 100);
    },
  },
};
</script>


<style lang='scss'>
.mailTable {
  border-collapse: collapse;
  margin-bottom: 10px;
  .default_value {
    color: #e8e8e8;
  }
  .index_close {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 20px;
    }
    /* padding: 0 30px; */
  }
  td {
    /* border: 1px solid #e8e8e8; */
    border: 1px solid #e8e8e8;
  }
  .rowStyle {
    text-align: center;
    min-width: 40px;
    background-color: #fafafa;
    /* border: 1px solid #f2f6fc; */
    font-size: 16px;
  }
  .row_key {
    min-width: 130px;
    font-size: 16px;
  }
  .DataStyle {
    /* border: 1px solid #f2f6fc; */
    text-align: center;
    font-size: 14px;
    color: #666;
    min-width: 100px;
    .h_title {
      font-size: 14px;
      padding: 10px;
      margin: 0;
    }
  }
  .DataStyle:hover {
    /* transform: scale(1.2); */
    background-color: #fafafa;
  }
}
</style>
